import React, {useEffect, useState} from "react";
import {Radio} from "antd";
import CommonFlex from "../CommonFlex/index";
import "./index.less";

 type OPTION = {
     id: string,
     label: string,
     value: string | number
 }
 type DEFAULT_VALUE = {
    label: string, //组件左边label
    type: string,  // 选择类型
    value: string, // 默认值
 }

interface Props {
    options: OPTION[];
    defaultValue: DEFAULT_VALUE,
    onChange?: (value: string) => void
};

const LabeSwitchFlex = (props: Props) => {

    const {defaultValue, options, onChange} = props;
    const [labelValue, setLabelValue] = useState("");

    console.log("---LayoutFlex--");
    console.log(defaultValue);
    useEffect(() => {
        options?.forEach((item) => {
            if(item.value == defaultValue?.value){
                setLabelValue(item.label);
            }
        });
    }, );

    const handleChange = (e: any) => {
        onChange(e.target.value);
    };

    return (
        <CommonFlex>
            {defaultValue?.label}
            <div className="layout-flex-box">
                <div className="layout-flex-text">{labelValue}</div>
                <div className="layout-flex-btns">
                    <Radio.Group defaultValue={defaultValue?.value} onChange={handleChange} buttonStyle="solid">
                        {options?.map((item: OPTION) => {
                            return(
                                <Radio.Button key={item.id} value={item.value}>{item.label}</Radio.Button>
                            );
                        })}
                    </Radio.Group>
                </div>
            </div>
        </CommonFlex>
    );
};
export default LabeSwitchFlex;